// import React from 'react';
import React from './ireact/react';
// import ReactDOM from 'react-dom';
import ReactDOM from './ireact/react-dom';


//默认情况下 只要态改变 所有组件都要刷新
//你可以使用 PureComponent
//但如果是深比较呢？
//可以使用immer

class Parent extends React.Component {
  state = {
    number1: 0
    ,number2: 0
  }

  addNumber1 = ()=>{
    this.setState({number1: this.state.number1 + 1});
  }

  addNumber2 = ()=>{
    this.setState({number2: this.state.number2 + 1});
  }

  render() {
    return (
      <div>
        <Counter1 number={this.state.number1}/>
        <Counter2 number={this.state.number2}/>
        <button onClick={this.addNumber1}>+counter1</button>
        <button onClick={this.addNumber2}>+counter2</button>
      </div>
    )
  }
}

class Counter1 extends React./*Component*/PureComponent {

  render() {
    console.log('ChildCounter1 render');
    return (
      <div>
        {this.props.number}
      </div>
    )
  }
}

class Counter2 extends React./*Component*/PureComponent {

  render() {
    console.log('ChildCounter2 render');
    return (
      <div>
        {this.props.number}
      </div>
    )
  }
}

ReactDOM.render(<Parent />, document.getElementById('root'));
